<template>
  <a-card>
    <a-table 
    :loading="$apollo.queries.archives.loading" 
    :dataSource="archives.data" :columns="columns" 
    :pagination="pagination" 
    @change="handleTableChange"
    ></a-table>
  </a-card>
</template>
<script>
import gql from 'graphql-tag'
import moment from 'moment'

export default {
  data(){
    return {
      columns: [
        {
          title: '#',
          key: 'id',
          dataIndex: 'id'
        },
        {
          title: '栏目',
          key: 'channel.name',
          dataIndex: 'channel.name'
        },
        {
          title: '标题',
          key: 'title',
          dataIndex: 'title'
        },
        {
          title: '浏览数',
          key: 'views',
          dataIndex: 'views'
        },
        {
          title: '评论',
          key: 'comments',
          dataIndex: 'comments'
        },
        {
          title: '更新时间',
          key: 'updatetime',
          dataIndex: 'updatetime',  
          customRender: text => moment(text * 1000).format('YYYY-MM-DD HH:ss:mm')
        },
        {
          title: '状态',
          key: 'status',
          dataIndex: 'status'
        },
      ],
      pageInfo: {
        page: 1,
        limit: 10,
      },
      archives: {
        data: [],
        total: 0
      }
    }
  },
  computed: {
    pagination(){
      return {
        current: this.pageInfo.page,
        pageSize: this.pageInfo.limit,
        total: this.archives.total
      }
    }
  },
  apollo: {
    archives: {
      query: gql`query archives ($page: Int!, $limit: Int!) {
        archives(page: $page, limit: $limit) {
          data {
            id
            title
            channel {
              name
            }
            views
            comments
            updatetime
            status
          }
          page,
        }
      }`,
      variables(){
        return {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit
        }
      }
    }
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      console.log(pagination)
      this.pageInfo.page = pagination.current
    },
  }
}
</script>